<template>
  <div>
    <!-- <el-upload
      :action="$http.adornUrl('/admin/file/upload/element')"
      :headers="{Authorization: $cookie.get('Authorization')}"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :on-success="handleUploadSuccess"
      :file-list="imageList"
      :before-upload="beforeAvatarUpload">
      <i class="el-icon-plus"></i>
    </el-upload> -->
    <el-upload
      :action="'#'"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :file-list="imageList"
      :http-request="handleHttpRequest"
      :before-upload="beforeAvatarUpload"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { uploadFile } from "../../utils/tx-upload";
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      file: {}
    };
  },
  props: {
    value: {
      default: "",
      type: String,
    },
  },
  computed: {
    imageList() {
      let res = [];
      if (this.value) {
        let imageArray = this.value.split(",");
        for (let i = 0; i < imageArray.length; i++) {
          res.push({
            url: this.resourcesUrl + imageArray[i],
            response: imageArray[i],
          });
        }
      }
      this.$emit("input", this.value);
      return res;
    },
  },
  methods: {
    beforeAvatarUpload(file) {
      console.log(111)
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/gif" ||
        file.type === "image/jpg";
      if (!isJPG) {
        this.$message.error("上传图片只能是jpeg/jpg/png/gif 格式!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }

      this.file = file
      // console.log(file);
    },
    handleHttpRequest() { 
      uploadFile(this.file, {
        schedule: (res) => {
          console.log(res, "上传进度");
        },
        success: (res) => {
          console.log(res, "上传成功");
          console.log(this.imageList,'========');
          // let pics = fileList
          //   .map((file) => {
          //     return file.response;
          //   })
          //   .join(",");
          let pics = ''
          if (this.value) { 
             pics=this.value + ',' + 'http://'+res.Location

          } else {
            pics= 'http://'+res.Location
          }
          this.$emit("input", pics);
          // imageUrl.value = 'http://'+res.Location
        },
        error: (err) => {
          console.log(err, "上传失败");
        },
      });
    },
    // // 图片上传
    // handleUploadSuccess(response, file, fileList) {
    //   console.log(fileList)
    //   let pics = fileList.map(file => {
    //     return file.response
    //   }).join(',')
    //   this.$emit('input', pics)
    // },
    // // 限制图片上传大小
    // beforeAvatarUpload (file) {
    //   const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg'
    //   if (!isJPG) {
    //     this.$message.error('上传图片只能是jpeg/jpg/png/gif 格式!')
    //   }
    //   const isLt2M = file.size / 1024 / 1024 < 2
    //   if (!isLt2M) {
    //     this.$message.error('上传图片大小不能超过 2MB!')
    //   }
    //   return isLt2M && isJPG
    // },
    handleRemove (file, fileList) {
      let pics = fileList.map(file => {
        return file.response
      }).join(',')
      this.$emit('input', pics)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>

